import React, { useEffect, useState } from 'react'
import { Link, Outlet } from 'react-router-dom'
import { Carousel } from 'antd'
import AuthStatus from '@/components/AuthStatus'
import { fetchLanguagePacks, fetchHomeData } from '@/request'
import Loader from './loader'
import { defaultLanguage, defaultLanguageMap } from '@/const/mock'
import { NavList } from '@/router/const'
import LanguageSetting from './LanguageSetting'
import Bottom from './Bottom'
import './index.less'

function Page() {
  const [language, setLanguage] = useState(defaultLanguage)
  const [LG, setLanguageMap] = useState(defaultLanguageMap[defaultLanguage])

  const onTapNav = (item: INavItem) => {
    console.log('onTapNav', item)
  }

  const updateLanguage = async (lang?: string = language) => {
    const languagePacks = await fetchLanguagePacks(lang)
    if (!languagePacks) return

    setLanguage(lang)
    setLanguageMap(languagePacks)
  }

  useEffect(() => {
    updateLanguage()
  }, [])

  return (
    <div className='layout-all'>
      <div className='layout-top cnt-width l-f jc-sb ai-fe'>
        <div className='logo'></div>
        <LanguageSetting LG={LG} updateLanguage={updateLanguage} language={language} />
      </div>
      <div className='nav-list'>
        <div className='cnt-width l-f jc-sb ai-fe'>
          {NavList.map((item, ind) => (
            <React.Fragment key={item.name}>
              {ind ? <div className='nav-line' /> : null}
              <div className='is-click-hand' onClick={() => onTapNav(item)}>
                {LG[item.name]}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className='main cnt-width'>
        <Outlet context={{ LG }} />
      </div>
      <Bottom LG={LG} />
      {/* <AuthStatus />

      <ul>
        <li>
          <Link to='/'>Public Page</Link>
        </li>
        <li>
          <Link to='/protected'>Protected Page</Link>
        </li>
      </ul>

       */}
    </div>
  )
}

export default Object.assign(Page, { Loader })
